import { useEffect, useState } from "react";

const defaultBreakpoints = {
  phone: 767,
  tablet: 1023,
  laptop: 1439,
  desktop: Infinity // 使用 Infinity 表示大于 1440px 的所有尺寸
}

const useBreakpoints = (customBreakpoints = defaultBreakpoints)=>{

  const [breakpoint, setBreakpoint] = useState<string>('');

  const handleResize = ()=>{
    const width = window.innerWidth;
    let newSize = ''

    for (const breakpoint in customBreakpoints) {
      if (width < customBreakpoints[breakpoint]) {
        newSize = breakpoint;
        break;
      }
    }
    if(!newSize){
      newSize = Object.keys(customBreakpoints).pop() || '';
    }
    setBreakpoint(newSize);
  }


  useEffect(()=>{
    handleResize();
    window.addEventListener('resize',handleResize);
    return ()=> window.removeEventListener('resize',handleResize)
  },[])

  return breakpoint;
}
export default useBreakpoints;